<template>
	<view>
		<!-- 导航栏 -->
		<navigation :showIcon="true" title="进店记录"></navigation>
		<view class="titles">

		</view>
		<view class="list_box" style="position: relative;">
			<text>预约门店</text>
			<input type="text" v-model="details.store_id" disabled @input="applyShop" placeholder="待填写" />
			<selectBox :value="shopValue" @clickHolet="clickHolet"></selectBox>
		</view>
		<view class="list_box">
			<text>预约时间</text>
			<timeSelector  showType="yearToMinute" @btnConfirm="makeConfirm" @btnCancel="makeCancel">
				<input type="text" disabled v-model="details.subscribe_time" placeholder="请选择预约时间" />
			</timeSelector>

		</view>
		<view class="list_box">
			<text>进店时间</text>
			<timeSelector showType="yearToMinute" @btnConfirm="baguetteConfirm" @btnCancel="baguetteCancel">
				<input type="text" disabled="" v-model="details.real_time" placeholder="请选择进店时间" />
			</timeSelector>
		</view>
		<view class="list_box" @click="showTwoPicker_linkage">
			<text>进店状态</text>
			<!-- <picker   :range="into_status_list" range-key="title" @change="pickerStatus" v-if="into_status_list[details.status]"> -->
			<view v-if=" JSON.stringify(into_status_list)!='[]'">
				<input type="text" v-model="into_status_list[details.status].title" disabled="" placeholder="请选择进店状态" />
			</view>
			<!-- </picker> -->
		</view>
		<wzp-picker ref="wzpPicker" :mode="mode" :pickerList="pickerList" :defaultIndex="defaultIndex" @onConfirm="onConfirm"></wzp-picker>
		<view class="list_box">
			<text>下次进店时间</text>
			<timeSelector showType="yearToMinute" @btnConfirm="nextConfirm" @btnCancel="nextCancel">
				<input type="text" disabled v-model="details.next_time" placeholder="" />
			</timeSelector>
		</view>
		<!-- 多选 -->
		<uni-popup ref="popup" type="center">
			<view class="comment_center">				
				<checkbox-group class="uni-list" @change="remarkChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in remark_array" :key="item.id">
						<view style="display: flex;justify-content: left;align-items: center;">
							<checkbox :value="item.id" :checked="item.checked"  style="transform: scale(0.6); "></checkbox>
							<view>{{item.title}}</view>
						</view>						
					</label>
				</checkbox-group>
			</view>
		</uni-popup>
		<view class="list_box" style="border-bottom: none;">
			<text>状态标签:</text>			
			<view class="remark_array" style="width: 300upx;">
				<view class="remark_list" style="" v-for="(items,index) in remark_values" :key="index">
					<text class="remark_title" style="">{{items}}</text>
					<text class="remark_Close" style="" @click="deleteRemarkFn(index)">X</text>
				</view>				
			</view>
		</view>
		<view class="list_box" style="border-bottom: none;" v-if="other||details.remark">
			<text>客户备注:</text>
			<textarea :disabled="!edit" style="width: 300upx;" v-model="details.remark" type="text" placeholder="备注" />			
		</view>
		<view class="save_btn" @click="saveDataFn">
			<button>保存</button>
		</view>
	</view>
</template>

<script>
	import wzpPicker from "@/component/wzp-picker/wzpPicker.vue";
	import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
	import navigation from '@/component/navigation.vue'
	import selectBox from '@/component/selectBox.vue'
	import sun from '@/utils/sun.js'
	export default {
		components: {
			navigation,
			timeSelector,
			selectBox,
			wzpPicker
		},
		data() {
			return {
				edit:1,//
				details: {}, //信息
				into_status_list: [], //进店状态			
				shopValue: '',
				options: '',

				reviewStatus: [], //回访状态
				reviewStatusValue: [
					[],
					[]
				], //回访状态			
				mode: "",
				pickerList: [],
				defaultIndex: [],
				timesIndex: [0, 0],
				pickerValue: '',
				note: {},
				remark_array:[],
				remark_values:[],
				other:false,//客户备注选择
				cause:[],
			};
		},
		onLoad(options) {
			
			// let pages = getCurrentPages()//获取页面的值

			this.options = options;

			this.editDataFn(options.id)

		},
		methods: {
			//多选
			remarkChange(e){
				 let value=e.detail.value
				 this.remark_values=[]
				 this.remark_array.map((item,index)=>{
					 value.map((items,indexs)=>{
						 if(item.id==items){
							 if(item.title=='其他')this.other=true
							 this.remark_values.push(item.title)
						 }
					 })
				 })
				 
				
				 
			},
			//删除多选
			deleteRemarkFn(index){
				this.remark_values.splice(index,1)
			},
			onConfirm(e) {
				if(this.edit==0){
					return
				}
				this.timesIndex = e;
				this.details.status = e[0]
				this.pickerValue = this.pickerList[e[0]].title
				this.note = this.pickerList[e[0]].children[e[1]]
                if(this.pickerList[e[0]].children.length>0){
					this.$refs.popup.open()
					this.remark_array=[]
					this.pickerList[e[0]].children.map((item,index)=>{
						this.remark_array.push(item)
					})
				}
				// if (this.note) {
				// 	this.details.remark = this.note.title
				// } else {
				// 	this.details.remark = ''
				// }
			},
			// 双列联动初始化
			showTwoPicker_linkage() {
				this.mode = 'one';
				this.pickerList = this.reviewStatus;
				this.defaultIndex = [0, 0];
				this.$refs.wzpPicker.showPicker();
			},
			//进店状态
			pickerStatus(e) {
				this.details.status = e.detail.value
			},
			//获取编辑信息
			editDataFn(id) {
				let that = this
				sun.request({
					url: "/h5/customer.enter/Edit",
					showLoading: true,
					token: true,
					data: {
						id: id
					},
					success(res) {
						if (res.code == 200) {
							that.into_status_list = res.data.into_status_list;
							that.details = res.data.details;
							that.edit=res.data.edit;
                            that.remark_values=res.data.cause;
							that.reviewStatus = res.data.into_status_list
							that.reviewStatus.map((item, index) => {
								that.reviewStatusValue[0].push(item.title)
								if (index == 0) {
									that.reviewStatusValue[1] = item.children
								}
							})
						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})
			},
			//预约时间 确定
			makeConfirm(e) {
				if(this.edit===0){
					return
				}
				this.details.subscribe_time = e.key
			},
			// 取消
			makeCancel(e) {},
			//进店时间
			baguetteConfirm(e) {
				if(this.edit==0){
					return
				}
				this.details.real_time = e.key
			},
			baguetteCancel() {},
			nextConfirm(e) {
				if(this.edit==0){
					return
				}
				this.details.next_time = e.key
			},
			nextCancel() {},
			//预约门店输入
			applyShop(e) {
				this.shopValue = e.detail.value;
			},
			//点击选取的酒店
			clickHolet(e) {
				this.selectedHotel = e
				this.details.store_id = e.title;
				this.details.Hotelid = e.id
				this.shopValue = '';
			},
			//编辑保存
			saveDataFn() {
				if(this.edit==0){
					uni.showToast({
						icon:"none",
						title:'没有保存权限'
					})
					return
				}
				let that = this
				sun.request({
					url: "/h5/customer.enter/doEdit",
					showLoading: true,
					token: true,
					data: {
						id: that.options.id,
						real_time: that.details.real_time,
						next_time: that.details.next_time,
						remark: that.details.remark,
						status: that.details.status,
						cause:  that.remark_values,
					},
					success(res) {
						if (res.code == 200) {
							let pages = getCurrentPages() // 当前页面
							let beforePage = pages[pages.length - 2] // 前一个页面
							uni.navigateBack({
								delta: 1,
								success: function() {
									beforePage.onLoad() // 执行前一个页面的onLoad方法       
								}

							})
						}
					}
				})
			}

		}
	}
</script>

<style lang="less">
	.titles {
		width: 100%;
		height: 24upx;
		background: rgba(245, 246, 246, 1);
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(30, 30, 30, 1);
		line-height: 64upx;
		padding-left: 51upx;
	}

	.list_box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 38upx 50upx;
		box-sizing: border-box;
		border-bottom: 1upx solid rgba(226, 226, 226, 1);

		text {
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(142, 142, 142, 1);
		}

		input {
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(30, 30, 30, 1);
		}
	}

	.hotel_name {
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(30, 30, 30, 1);
	}

	.save_btn {
		width: 100%;
		height: 73upx;
		margin-top: 100upx;

		button {
			width: 686upx;
			height: 100%;
			background: rgba(64, 108, 235, 1);
			;
			border-radius: 36upx;
			line-height: 73upx;
			text-align: center;
			color: #ffffff;
		}

	}

	.remark_array {
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
	}

	.remark_list {
		margin-bottom: 10upx;
		padding: 10rpx 30rpx;
		background: #007AFF;
		border-radius: 20upx;
		text-align: center;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.remark_title {
		color: #FFFFFF !important
	}

	.remark_Close {
		color: #FFFFFF !important;
		position: absolute;
		top: -10upx;
		right: -10upx;
		color: #FFFFFF;
		background: red;
		border-radius: 50%;
		display: inline-block;
		width: 35upx;
		height: 35upx;
		line-height: 35upx;
	}



	.comment_center {
		border-radius: 10upx;
		padding: 30upx;
		background: #FFFFFF;
		font-size: 23upx;
	}
</style>
